<template>
    <div class="api-log">
      <!-- 导航 -->
      <tz-breadcrumb   :pathArr='[{"name": "日志管理"},{"name": "接口日志", "url": "/apiLog"}]'></tz-breadcrumb>
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="formInline" class="form" label-position="left" label-width="80px" >
        <el-row :gutter="0">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div>
              <!-- 收银员 -->
              <el-form-item class="form-item" label="收银员">
                <el-input class="time" v-model="formInline.casher" placeholder=""></el-input>
              </el-form-item>
              <!-- 订单类型 -->
              <el-form-item class="form-item" label="API名称">
                <el-input class="time" v-model="formInline.apiName" placeholder=""></el-input>
              </el-form-item>
              <!-- 搜索 -->
                <el-form-item  class="form-item">
                <el-col native-type='submit' :xs="12" :sm="12" :md="12" :lg="24" :xl="24">
                    <el-button type="primary" size='medium'>搜索</el-button>
                    <a href="javascript:;" style="color: #666;margin-left: 15px;" @click="showAdvance">高级搜索</a>
                </el-col>
                </el-form-item>
            </div>
            <el-collapse-transition>
              <div v-if="advancedSearch" style="padding-top: 15px;">
                <!-- 高级搜索 -->
                <!-- 时间选择 -->
                <el-form-item class="form-item" label="时间选择">
                  <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change='timeChange'></el-date-picker>
                </el-form-item>
                <!-- 所属商家 -->
                <el-form-item class="form-item" label="所属商家">
                <el-input class="time" v-model="formInline.storeName" placeholder=""></el-input>
                </el-form-item>
              </div>
            </el-collapse-transition>
          </el-col>
        </el-row>
      </el-form>
      <!-- 搜索结果 -->
      <el-table class="logData" :data="datas" style="width: 100%">
        <!-- 编号 -->
        <el-table-column label="编号">
          <template slot-scope="scope">
            <span>13251</span>
          </template>
        </el-table-column>
        <!-- 所属商家 -->
        <el-table-column label="所属商家">
          <template slot-scope="scope">
            <span>杭州天择网络科技有限公司</span>
          </template>
        </el-table-column>
        <!-- 所属商家 -->
        <el-table-column label="收银员">
          <template slot-scope="scope">
            <span>收银员A</span>
          </template>
        </el-table-column>
        <!-- 定位接口 -->
        <el-table-column label="定位接口">
          <template slot-scope="scope">
            <span>a.php</span>
          </template>
        </el-table-column>
        <!-- 发生时间 -->
        <el-table-column label="发生时间">
          <template slot-scope="scope">
            <span>2017-01-01 00:00:00</span>
          </template>
        </el-table-column>
        <!-- 负责人 -->
        <el-table-column label="负责人">
          <template slot-scope="scope">
            <span>天择</span>
          </template>
        </el-table-column>
        <!-- 查看详情 -->
        <el-table-column label="">
          <template slot-scope="scope">
            <el-button type="warning" plain size="medium" @click="logDetail(scope.row.id)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import { msToDate } from './../../controller/common';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  data () {
    return {
      formInline: {
        startTime: '',
        endTime: '',
        orderType: '',
        casher: '',
        storeName: '',
        apiName: ''
      },
      time: [],
      datas: [],
      // 高级搜索
      advancedSearch: false
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    logDetail (id) {
      console.log(id);
    },
    timeChange (val) {
      // 日期空间确定时触发
      this.formInline.startTime = msToDate(val[0]);
      this.formInline.endTime = msToDate(val[1]);
    },
    showAdvance () {
      this.advancedSearch = !this.advancedSearch;
    }
  }
};
</script>

<style lang="stylus" scoped>
.api-log
  .form
    padding: 2rem
    margin-top: 15px
    margin-bottom: 12px
    box-sizing: border-box
    background: #fff
    box-shadow: 1px 1px 1px #999
    .form-item
      display: inline-block
      margin-right: 35px
      margin-bottom: 0
      label
        font-size: 14px
        color: #333
        width: 70px
        display: inline-block
      .time
        width: 200px
</style>
